<template>
  <div class="social-media-dashboard" >
    <div class="dashboard-title">Direct Mentions</div>
    <div class="dashboard-count">400</div>
    <div class="performance-chart-wrapper" ref="chartContainer">
      <PieChart
        :option="performanceChartOptions"
        :height="'1.4375rem'"
        :width="chartWidth"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      chartWidth: "100%", // 初始宽度
      showPositiveMedia: true, // 语义化变量名
      performanceChartOptions: {
        legend: {
          orient: "vertical",
          left: "10%",
          top: "30%",
          icon: "circle", // 改为圆形图标
          itemWidth: 8, // 小圆点宽度
          itemHeight: 8, // 小圆点高度
          itemGap: 20, // 图例项间距
          formatter: (name) => {
            const dataItem = this.performanceChartOptions.series[0].data.find(
              (item) => item.name === name
            );
            // 使用富文本格式分隔名称和数值
            return `{name|${name}}    {value|${dataItem ? dataItem.value : 0}}`;
          },
          textStyle: {
            color: "#454545",
            fontSize: 12,
            fontWeight: 400,
            // 富文本样式定义
            rich: {
              name: {
                // 名称样式（左侧文本）
                color: "#454545",
                padding:[0,8,0,0,],
                fontWeight: 400,
              },
              value: {
                // 数值样式（右侧文本）
                color: "#232323", // 数值颜色更深
                fontWeight: 600, // 数值加粗
              },
            },
          },
        },
        graphic: [
          {
            type: "text",
            left: "75%", // 改为容器水平居中
            top: "40%", // 上文字位置
            style: {
              text: "9.23",
              textAlign: "center",
              fill: "#000",
              fontSize: 24,
              fontWeight: "700",
              // 新增：通过 transform 实现真正居中
              transform: [{ type: "translate", x: "-50%", y: "-50%" }],
            },
          },
          {
            type: "text",
            left: "75%", // 容器水平居中
            top: "55%", // 下文字位置
            style: {
              text: "Performance",
              textAlign: "center",
              fill: "#8F8F8F",
              fontSize: 12,
              fontWeight: "600",
              transform: [{ type: "translate", x: "-50%", y: "-50%" }], // 居中偏移
            },
          },
        ],
        series: [
          {
            name: "Sentiment Distribution",
            type: "pie",
            top: "0%",
            left: "0%",
            bottom: "10%",
            radius: ["70%", "90%"],
            center: ["80%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 15,
              borderColor: "#fff",
              borderWidth: 10,
            },
            label: {
              show: true,
              formatter: function (params) {
                return ` ${Math.floor(params.percent)}%`;
              },
              position: "outside",
              padding: [0, -30],
              style: {
                color: "#000 !important", // 使用 !important 强制应用颜色样式
                fontSize: 12,
                fontWeight: "normal",
              },
            },
            labelLine: {
              show: false,
              labelStyle: {
                color: "#000 !important", // 也可以在这里设置 labelLine 的颜色样式
                fontSize: 12,
                fontWeight: "normal",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
                color: "#000",
              },
            },
            data: [
              { value: 300, name: "Neutral", itemStyle: { color: "#8F8F8F" } },
              { value: 300, name: "Negative", itemStyle: { color: "#CE4049" } },
              { value: 600, name: "Positive", itemStyle: { color: "#2FAA68" } },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.calculateChartDimensions(); // 初始化尺寸
    window.addEventListener("resize", this.calculateChartDimensions); // 监听窗口缩放
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.calculateChartDimensions); // 移除监听
  },
  methods: {
    calculateChartDimensions() {
      if (!this.$refs.chartContainer) return;

      // 获取图表容器的实际可用宽度（已考虑父容器padding）
      const containerWidth = this.$refs.chartContainer.offsetWidth;

      // 直接使用容器宽度（减去必要的边距）
      this.chartWidth = `${containerWidth - 24}px`; // 24px为预留边距

      // 调试输出
      console.log("Calculated chart width:", this.chartWidth);
    },
  },
};
</script>

<style lang="scss" scoped>
.social-media-dashboard {
  height: 1.8264rem;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 0.0556rem;
  border: 1px solid #cdcccc;
}

.dashboard-title {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #232323;
}

.dashboard-count {
  position: absolute;
  top: 40%;
  font-size: 18px;
  font-weight: 600;
  color: #454545;
}

.performance-chart-wrapper {
  flex: 1;
  max-width: 100%;
  margin-left: 24px;
}
</style>